<template>
    <div>
        <el-dialog style="background: #F0F0F0;" :visible.sync="value" center :show-close="false">
            <el-form ref="form" :model="data" inline>
                <el-form-item prop="name" label="课程名称" :rules="[{ required:true,message:'请填写课程名称',trigger:'blur' }]">
                    <el-input v-model="data.name" :maxlength="5" show-word-limit style="width: 220px"></el-input>
                </el-form-item>
                <el-form-item prop="sortNumber" label="课程排序" :rules="[{ required:true,message:'请填写课程排序',trigger:'blur' },{type:'number',message:'只能是数字',trigger:'blur' }]">
                    <el-input v-model.number="data.sortNumber" :maxlength="3" show-word-limit style="width: 220px"></el-input>
                </el-form-item>
                <el-form-item prop="curriculumId" label="所属阶段" :rules="[{ required:true,message:'请选择所属阶段',trigger:'change' }]">
                    <el-cascader-panel v-model="data.curriculumId" :options="options" :props="{emitPath:false,value:'id',label:'name',children:'children'}">
                        <template slot-scope="{ node, data }">
                            <span>{{ data.name }}</span>
                            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                        </template>
                    </el-cascader-panel>
                </el-form-item>
            </el-form>
            <template slot="footer">
                <el-button type="success" icon="el-icon-plus" @click="handleSubmit" v-loading.fullscreen.lock="fullscreenLoading">提交</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>

    import { save } from "@/api/academic/books";
    import { getCurriculumChildrenBySchool } from "@/api/academic/school";

    export default {
        name: "books-child",
        data(){
            return {
                value : false,
                fullscreenLoading:false,
                data : {},
                options:[]
            }
        },
        watch:{
            value(data){
                if(data){
                    getCurriculumChildrenBySchool().then(res=>{
                        this.options = res.data.data;
                    })
                }
            }
        },
        methods:{
            handleSubmit(){
                this.$refs['form'].validate(valid=>{
                    if(valid){
                        this.fullscreenLoading = true;
                        save(this.data).then(res=>{
                            this.$message({
                                type:res.data.success?'success':'error',
                                message:res.data.message,
                                center:true
                            });
                            this.value = false;
                            this.fullscreenLoading = false;
                            this.$parent.getList({page:1,size:10,total:0});
                        })
                    }else{
                        return false;
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>